<template>
	<view class="">
		<xw-empty v-if="httpFlag == true" :isShow="emptyShow" text="暂无喜欢" textColor="#777777"></xw-empty>
		<view class="selectBox">
			<view v-if="LinkType == true" class="selectItem" v-for="(el,index) in classList" :key="index"
				@click="goDetails(el)">
				<image class="selectImg" :src="el.cover_img" mode=""></image>
				<view class="selectText">
					{{el.name}} 第{{el.sort}}集
				</view>
			</view>
			<view v-else class="selectItem" v-for="(el,index) in imgList" :key="index">
				<image class="selectImg" :src="el.url" mode=""></image>
				<view class="selectText">

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLike,
		getSmallTheaterDetails,
		getisOnline
	} from '@/module/index.js'
	import xwEmpty from '@/components/xw-empty/xw-empty';
	const app = getApp()
	export default {
		components: {
			xwEmpty
		},
		data() {
			return {
				emptyShow: true, //true显示，false隐藏,
				httpFlag: false,
				classList: [],
				LinkType:  uni.getStorageSync('is_online'),
				imgList: [{
						url: "http://videooss.dingding10.top/material/202107/15/3b07288db0aa2973264446467672e9353f198f40.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/551a48598821783959338677b196f6968dd5386f.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/c4ff678aee225587b5633eeb3d52651d9592400f.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/5a99222352341acde8c424af3cf0a6e2bd0eadb7.jpg"
					},
					{
						url: "http://videooss.dingding10.top/material/202107/15/a3e9d265f20a3bb2158aeff5da1ed5620ff87e91.jpg"
					}
				]
			}
		},
		onLoad(e){
			uni.setStorageSync('login_message', {
				official_account_id:e?.official_account_id,
				uid:e?.uid,
				video_id:e?.video_id
			})
		},
		onShow() {
			this.getLike()
			// this.getisOnline()
		},
		methods: {
			getisOnline() {
				getisOnline().then((res) => {
					if (res.code === 200) {
						console.log(res.data.type)
						this.LinkType = res.data.type
						// let stoTimer = setTimeout(() => {
						// 	clearTimeout(stoTimer)
						// 	stoTimer = null
						// }, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getLike() {
				//发起请求
				getLike().then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.classList = res.data
						if (this.classList.length <= 0) {
							this.emptyShow = true
						} else {
							this.emptyShow = false
						}
						this.httpFlag = true
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getSmallTheaterDetails(el) {
				//发起请求
				let obj = {
					video_id: el.id,
					video_detail_id: el.video_detail_id
				}
				getSmallTheaterDetails(obj).then((res) => {
					if (res.code === 200) {
						console.log(res)
						this.classList = res.data.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goDetails(el) {
				if (this.LinkType == false) {
					uni.navigateTo({
						url: "/wxcomponents/testPage/index?video_id=" + el.id +
							'&video_detail_id=' + el.video_detail_id
					});
				} else {
					uni.navigateTo({
						url: "/wxcomponents/yjy-video-slide/yjy-video-slide?video_id=" + el.id +
							'&video_detail_id=' + el.video_detail_id
					});
				}
			}
		}
	}
</script>

<style scoped>
	.selectBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10rpx 2rpx 60rpx;
	}

	.selectBox:after {
		display: block;
		content: "";
		width: 44%;
		height: 0px;
	}

	.selectItem {
		width: 44%;
		margin-bottom: 20rpx;
		border: 1px solid #EAEAEA;
		border-radius: 10rpx;
		/* height: 680rpx; */
	}

	.selectImg {
		width: 100%;
		height: 600rpx;
		border-radius: 10rpx 10rpx 0 0;
		vertical-align: middle;
	}

	.selectText {
		font-weight: bold;
		font-size: 28rpx;
		text-align: center;
		padding:10rpx 0;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>
